<template>
    <!--级联选择组件-->
  <div class="cascader" v-show="$store.state.app.c.show">
    <div class="container1">
    </div>
    <!--容器-->
    <div class="container2">
      <!--头部-->
      <div class="header">
        <div class="h-n">
          <div class="font1" @click="tag">
            取消
          </div>
          <div class="font2" @click="sure">
            确定
          </div>
        </div>
      </div>
      <!--内容-->
      <div class="content">
        <mt-picker :slots="myAddressSlots" value-key="name" @change="onMyAddressChange"></mt-picker>
      </div>
    </div>
  </div>
</template>

<script>
  import myaddress from '../../../static/pca.json'     //引入省市区数据
    export default {
        name: "my-cascader",
        data() {
            return {
              province:"",
              city:"",
              town:"",
              myAddressSlots: [
                {
                  flex: 1,
                  defaultIndex: 1,
                  values:myaddress,
                  className: 'slot1',
                  textAlign: 'center'
                }, {
                  divider: true,
                  content: '-',
                  className: 'slot2'
                }, {
                  flex: 1,
                  values:[],
                  className: 'slot3',
                  textAlign: 'center'
                },
                {
                  divider: true,
                  content: '-',
                  className: 'slot4'
                },
                {
                  flex: 1,
                  values:[],
                  className: 'slot5',
                  textAlign: 'center'
                }
              ],
            };
        },
      mounted(){
        this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
          this.myAddressSlots[0].defaultIndex = 0
          // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
          //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
        });
      },
      methods: {
        sure(){
           this.$store.commit("cAddress",{province:this.province,city:this.city,town:this.town})
           this.$store.commit("cShow",false);
        },
        tag(){
          this.$store.commit("cShow",false);
        },
        onMyAddressChange(picker, values) {
          if (values[0]){
            this.province=values[0].name;
            picker.setSlotValues(1,values[0].children);
          }
          if (values[1]){
            this.city=values[1].name;
            picker.setSlotValues(2,values[1].children);
          }
          if (values[2]){
            this.town=values[2].name;
          }
        },
      },


    }
</script>

<style lang="less" scoped>
@import "./less/my-cascader";
</style>
